<template>
  <header class="edit-head">hello</header>
  <section class="edit-container co-container">
    <aside class="left-side co-aside">
      左侧
    </aside>
    <main class="co-main" ref="renderContainer"></main>
    <aside class="right-side co-aside">
      右侧
    </aside>
  </section>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { EditorApp } from '../../editor-app/EditorApp';
import { isHTMLDom } from '@/Common/typeHelper';
import { testMain } from '@/editor-app/Test';

const editApp = new EditorApp();
const renderContainer = ref<HTMLElement>();

onMounted(() => {
  if (isHTMLDom(renderContainer.value)) {
    editApp.mountRenderCanvas(renderContainer.value);
  }
  else {
    console.error("not find renderContainer");
  }

  testMain();
});



</script>

<style lang="less" scoped>
.edit-head {
  height: 42px;
  width: 100vw;
  // 深蓝底色
  background-color: rgb(11, 11, 133);
}

.edit-container {
  height: calc(100vh - 42px);
  width: 100vw;

  background-color: #ccc;
}

.left-side{
  width: 300px;
  background-color: aqua;
}

.right-side{
  width: 350px;
  background-color: palevioletred;
}
</style>
